<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-form
            :model="queryParams"
            ref="queryForm"
            :size="small"
            :inline="true"
            label-with="70px"
          >
            <!-- 设备编号 -->
            <el-form-item label="设备编号：" prop="deviceId">
              <el-input
                v-model="queryParams.deviceId"
                placeholder="请输入"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              >
              </el-input>
            </el-form-item>
            <!-- 设备名称 -->
            <el-form-item label="设备名称：" prop="deviceName">
              <el-input
                v-model="queryParams.deviceName"
                placeholder="请输入"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              ></el-input>
            </el-form-item>
            <!-- 状态 -->
            <el-form-item label="状态:" prop="status">
              <el-select
                v-model="statusList"
                placeholder="请选择"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="handleQuery"
                >搜索</el-button
              >
              <el-button size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <!-- 归还设备  设备信息导出 -->
    <el-row :gutter="20" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain size="mini">归还设备</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain size="mini">设备信息导出</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      statusList: ["归还中", "未归还"],
      queryParams: {
        deviceId: null,
        deviceName: null,
      },
    };
  },
};
</script>
